<script setup>
import Toast from '@vant/weapp/dist/toast/toast';

import { wxMiniGetPhoneNumber } from '@/api/login';

import { useUserStore } from "@/store/modules";

import { getToken } from "@/utils/auth";

import { ref, computed } from 'vue'
import { onShow } from "@dcloudio/uni-app";



const emit = defineEmits(['update:modelValue'])


const userStore = useUserStore();
const userInfo = ref({})
const show = ref(false);

const queryParams = ref({
    unionId: ''
})


// 绑定手机号
async function wxMiniGetPhoneNumberFn() {
    try {
        queryParams.value.unionId = userInfo.value.unionId; // 更新unionId
        const res = await wxMiniGetPhoneNumber(queryParams.value);
        Toast.success({
            message: res.message,
            onClose: () => {
                userStore.getUserInfo(); // 刷新用户信息
                show.value = false; // 隐藏弹窗
            },
        })
    } catch (error) {
        Toast.fail(error.data.message)
    }

}

// 获取微信绑定用户手机号
const getPhoneNumber = async (e) => {
    queryParams.value.code = e.detail.code
    wxMiniGetPhoneNumberFn()
}



// 弹窗关闭时触发的函数
function onClose() {
    show.value = false; // 隐藏弹窗
}

// 检查是否满足显示弹窗的条件，并在条件满足时显示弹窗
function checkAndShowPopup() {
    const { genImageNum, rewardImageNum, isBindPhone, level } = userInfo.value;
    if (!isBindPhone && ((genImageNum + rewardImageNum) > 0 || level > 0)) {
        show.value = true; // 显示弹窗
    }
}

// 页面显示时触发的生命周期函数
onShow(async () => {
    if (!getToken()) return
    userInfo.value = await userStore.getUserInfo()
    setTimeout(() => {
        checkAndShowPopup(); // 延迟检查并显示弹窗
    }, 300);
});

const customStyle = `background-color:transparent !important;`
</script>

<template>
    <van-popup :show="show" :custom-style="customStyle">
        <div class="bindPhonePopup">
            <img src="https://devweb.topyunliu.com/upload/2025/04/17/file_20250417172328A004.png" mode="widthFix"
                class="imgSty" alt="">
            <div class="del_icon" @click="onClose">
                <i class="iconfont ai-icon-jiazaiguanbianniu"></i>
            </div>
            <div class="content">
                <div class="title">温馨提示</div>
                <div class="label">为了您的账号安全以及后续服务，请尽快绑定手机号</div>
                <button class="bind_btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">绑定手机号</button>
            </div>
        </div>
    </van-popup>
</template>

<style lang='scss' scoped>
.bindPhonePopup {
    position: relative;
    width: 540rpx;
    height: 600rpx;

    .imgSty {
        width: 540rpx;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
    }

    .del_icon {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 3;
        width: 48rpx;
        height: 48rpx;
        border-radius: 50%;
        border: 2rpx solid rgba(255, 255, 255, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;

        .iconfont {
            font-size: 48rpx;
            color: #bcbcbc;
        }
    }

    .content {
        position: relative;
        z-index: 2;
        padding: 214rpx 30rpx 0;
        text-align: center;

        .title {
            color: #121212;
            font-weight: bold;
            font-size: 40rpx;
        }

        .label {
            color: #323232;
            font-size: 28rpx;
            line-height: 46rpx;
        }

        .bind_btn {
            height: 72rpx;
            border-radius: 36rpx;
            background: linear-gradient(243deg, #A3B4FB 0%, #C3E9FF 100%);
            font-weight: bold;
            font-size: 30rpx;
            color: #121212;
            margin-top: 50rpx;
            display: flex;
            align-items: center;
            justify-content: center;

            &::after {
                border: none;
            }

        }
    }
}
</style>